{% stylesheet %}
  .block_brand_list a {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  .block_brand_list a img {
    width: 100%;
    object-fit: cover;
  }
  .block_brand_list a img[data-src] {
    max-height: 60px;
  }
  .block_brand_list a .text {
    color: var(--text-color);
    text-align: center;
  }
  .block_brand_list .block_brand-warp {
    position: relative;
  }
  .block_brand_list .block_brand-warp .pagination {
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    overflow: hidden;
  }
  .block_brand_list .block_brand-warp .pagination span {
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #1d1f21;
    border-radius: 50%;
    background: none;
    margin: 0 3px;
    opacity: 1;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .block_brand_list .block_brand-warp .pagination span.swiper-pagination-bullet-active {
    background: #1d1f21;
  }
  .block_brand_list .block_brand-warp .swiper-button-disabled path {
    fill: #ccc !important;
  }
  .block_brand_list .block_brand-warp .brand-next,
  .block_brand_list .block_brand-warp .brand-prev {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -25px;
    cursor: pointer;
    right: -50px;
    transition: all 0.4s ease-in-out;
  }
  .block_brand_list .block_brand-warp .brand-next svg,
  .block_brand_list .block_brand-warp .brand-prev svg {
    width: 20px;
    height: 20px;
  }
  .block_brand_list .block_brand-warp .brand-next svg path,
  .block_brand_list .block_brand-warp .brand-prev svg path {
    fill: #000000;
  }
  .block_brand_list .block_brand-warp .brand-prev {
    left: -50px;
  }
  @media screen and (max-width: 767px) {
    .block_brand_list .block_brand-warp .brand-prev, .block_brand_list .block_brand-warp .brand-next {
      display: none;
    }
    .block_brand_list .block_brand-warp .pagination {
      display: flex !important;
    }
  }
  .block_brand_list .swiper {
    overflow: hidden;
  }
  .block_brand_list .list.style2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  .block_brand_list .list.style2 .list_item {
    width: calc(100% / var(--pc_number) - 20px);
    box-sizing: border-box;
  }
  @media screen and (max-width: 767px) {
    .block_brand_list .list.style2 .list_item {
      width: calc(100% / var(--wap_number) - 20px);
    }
  }
  .block_brand_list .brand_scroll_wrap {
    display: flex;
    overflow: hidden;
  }
  .block_brand_list .brand_scroll_wrap .list.style3 {
    display: flex;
    flex-shrink: 0;
    gap: 20px;
    will-change: transform;
	padding-right: 20px;
  }
  .block_brand_list .brand_scroll_wrap .list.style3 .list_item {
    flex-shrink: 0;
    width: calc(100% / var(--pc_number) - 20px);
    box-sizing: border-box;
  }
  @media screen and (max-width: 767px) {
    .block_brand_list .brand_scroll_wrap .list.style3 .list_item {
      width: calc(100% / var(--wap_number) - 20px);
    }
  }
{% endstylesheet %}

{% assign data = section.settings %}
{% assign defaultImageEmpty = 'empty.png' | public_asset_abs_dir_url %}
{% assign defaultImageLoading = 'empty_loading.png' | public_asset_abs_dir_url %}
{% assign blockId = block_id | default: section.block_id %}
{% assign wap_number = section.settings.wap_number | default: 2 %}
{% assign pc_number = section.settings.pc_number | default: 6 %}
{% assign styleType = section.settings.mobile_style.type | default: 1 %}
{% assign blocksLength = section.blocks %}
<div class="block_brand_list" id="block_brand_list-{{blockId}}">
  <div class="container_wrapper">
    {% include 'block_title', title: data.title, detail: data.detail %}
    <div class="content">
      {% if styleType == 1 %}
        <div class="block_brand-warp">
          <div class="swiper" id="swiper-{{blockId}}">
            <ul class="swiper-wrapper">
              {% for block in section.blocks %}
                <li class="swiper-slide">
                  <a href="{{block.link | setUrlDataFrom:data_from}}">
                    {% if block.image.src != '' %}
                      <img
                        class="block_brand-image swiper-lazy"
                        data-src="{{block.image.src|public_front_asset_url}}"
                        src="{{defaultImageLoading}}"
                        alt="{{block.image.alt}}"
                      >
                    {% else %}
                      <img
                        class="block_brand-image swiper-lazy"
                        data-src="{{block.image.src|public_front_asset_url}}"
                        src="{{ defaultImageEmpty }}"
                        alt="{{block.image.alt}}"
                      >
                    {% endif %}
                    {% if block.text != '' %}
                      <h3 class="text" style="--text-color: {{block.text_color}};">{{ block.text|html_content_filter }}</h3>
                    {% endif %}
                    <div class="swiper-lazy-preloader"></div>
                  </a>
                </li>
              {% endfor %}
              {% unless blocksLength %}
                {% for block in (1..6) %}
                  <li class="swiper-slide">
                    <a href="{{block.link.url | default :'javascript:;'}}">
                      <img
                        class="block_brand-image swiper-lazy"
                        data-src="{{block.image.src | public_front_asset_url}}"
                        src="{{ defaultImageEmpty }}"
                        alt="{{block.image.alt}}"
                      >
                      {% if block.text != '' %}
                        <div class="text" style="--text-color: {{block.text_color}};">{{ block.text|html_content_filter }}</div>
                      {% endif %}
                      <div class="swiper-lazy-preloader"></div>
                    </a>
                  </li>
                {% endfor %}
              {% endunless %}
            </ul>
          </div>
          {% if styleType == 1 %}
            {% if blocksLength.size > pc_number %}
              <div class="brand-prev" id="block_prev_{{ blockId  }}">
                {% include 'icon_silde_left', width: '24', height: '24' %}
              </div>
              <div class="brand-next" id="block_next_{{ blockId  }}">
                {% include 'icon_silde_right', width: '24', height: '24' %}
              </div>
            {% endif %}

            {% if blocksLength.size > wap_number %}
              <div class="pagination" id="pagination_{{blockId}}"></div>
            {% endif %}
          {% endif %}
        </div>
      {% endif %}
      {% if styleType == 2 %}
        {%- capture Alignment -%}
          {% if data.mobile_style.alignment == '1' %}
            justify-content: flex-end !important;
          {% elsif data.mobile_style.alignment == '2' %}
            justify-content: flex-start !important;
          {% else %}
            justify-content: center !important;
          {% endif %}
        {%- endcapture -%}
        <ul class="list style2" style="{{Alignment}}">
          {% for block in blocksLength %}
            <li class="list_item" style="--wap_number:{{wap_number}};--pc_number:{{pc_number}}">
              <a href="{{block.link | setUrlDataFrom:data_from}}">
                {% if block.image.src != '' %}
                  <img
                    class="block_brand-image"
                    data-src="{{block.image.src|public_front_asset_url}}"
                    src="{{defaultImageLoading}}"
                    alt="{{block.image.alt}}"
                  >
                {% else %}
                  <img
                    class="block_brand-image"
                    data-src="{{block.image.src|public_front_asset_url}}"
                    src="{{ defaultImageEmpty }}"
                    alt="{{block.image.alt}}"
                  >
                {% endif %}
                {% if block.text != '' %}
                  <div class="text" style="--text-color: {{block.text_color}};">{{ block.text|html_content_filter }}</div>
                {% endif %}
              </a>
            </li>
          {% endfor %}
          {% unless blocksLength %}
            {% for block in (1..6) %}
              <li class="list_item" style="--wap_number:{{wap_number}};--pc_number:{{pc_number}}">
                <a href="javascript:;">
                  <img
                    class="block_brand-image"
                    data-src="{{block.image.src|public_front_asset_url}}"
                    src="{{ defaultImageEmpty }}"
                    alt="{{block.image.alt}}"
                  >
                </a>
              </li>
            {% endfor %}
          {% endunless %}
        </ul>
      {% endif %}

      {% if styleType == 3 %}
        {% if data.mobile_style.is_scroll %}
          <div class="brand_scroll_wrap">
            {% for i in (1..3) %}
              <ul class="list style3">
                {% for block in blocksLength %}
                  <li class="list_item" style="--wap_number:{{wap_number}};--pc_number:{{pc_number}}">
                    <a href="{{block.link | setUrlDataFrom:data_from}}">
                      {% if block.image.src != '' %}
                        <img
                          class="block_brand-image"
                          data-src="{{block.image.src|public_front_asset_url}}"
                          src="{{defaultImageLoading}}"
                          alt="{{block.image.alt}}"
                        >
                      {% else %}
                        <img
                          class="block_brand-image"
                          data-src="{{block.image.src|public_front_asset_url}}"
                          src="{{ defaultImageEmpty }}"
                          alt="{{block.image.alt}}"
                        >
                      {% endif %}
                      {% if block.text != '' %}
                        <div class="text" style="--text-color: {{block.text_color}};">{{ block.text|html_content_filter }}</div>
                      {% endif %}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endfor %}

            {% unless blocksLength %}
              <ul class="list style3">
                {% for block in (1..6) %}
                  <li class="list_item" style="--wap_number:{{wap_number}};--pc_number:{{pc_number}}">
                    <a href="javascript:;">
                      <img
                        class="block_brand-image"
                        data-src="{{block.image.src|public_front_asset_url}}"
                        src="{{ defaultImageEmpty }}"
                        alt="{{block.image.alt}}"
                      >
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endunless %}
          </div>
        {% endif %}
        {% unless data.mobile_style.is_scroll %}
          <div class="block_brand-warp">
            <div class="swiper" id="swiper-{{blockId}}">
              <ul class="swiper-wrapper">
                {% for block in section.blocks %}
                  <li class="swiper-slide">
                    <a href="{{block.link | setUrlDataFrom:data_from}}">
                      {% if block.image.src != '' %}
                        <img
                          class="block_brand-image swiper-lazy"
                          data-src="{{block.image.src|public_front_asset_url}}"
                          src="{{defaultImageLoading}}"
                          alt="{{block.image.alt}}"
                        >
                      {% else %}
                        <img
                          class="block_brand-image swiper-lazy"
                          data-src="{{block.image.src|public_front_asset_url}}"
                          src="{{ defaultImageEmpty }}"
                          alt="{{block.image.alt}}"
                        >
                      {% endif %}
                      {% if block.text != '' %}
                        <div class="text" style="--text-color: {{block.text_color}};">{{ block.text|html_content_filter }}</div>
                      {% endif %}
                      <div class="swiper-lazy-preloader"></div>
                    </a>
                  </li>
                {% endfor %}
                {% unless blocksLength %}
                  {% for block in (1..6) %}
                    <li class="swiper-slide">
                      <a href="{{block.link.url | default :'javascript:;'}}">
                        <img
                          class="block_brand-image swiper-lazy"
                          data-src="{{block.image.src|public_front_asset_url}}"
                          src="{{ defaultImageEmpty }}"
                          alt="{{block.image.alt}}"
                        >
                        {% if block.text != '' %}
                          <div class="text" style="--text-color: {{block.text_color}};">{{ block.text|html_content_filter }}</div>
                        {% endif %}
                        <div class="swiper-lazy-preloader"></div>
                      </a>
                    </li>
                  {% endfor %}
                {% endunless %}
              </ul>
            </div>
          </div>
        {% endunless %}
      {% endif %}
    </div>
  </div>
</div>

<script>
  $(function () {
    {%- if styleType == 1  -%}
      let swiper = new Swiper('#swiper-{{blockId}}', {
        slidesPerView: {{pc_number }},
        spaceBetween: 30,
        autoHeight: true,
        lazy: {
          loadPrevNext: true,
        },
        navigation: {
            nextEl: "#block_next_{{ blockId  }}",
            prevEl: "#block_prev_{{ blockId  }}"
        },
        breakpoints: {
          768: {
              slidesPerView: {{wap_number}},
              spaceBetween: 20,
              pagination: {
                el: "#pagination_{{ blockId  }}"
              }
          }
        }
      })
      $(`#swiper-{{blockId}} .swiper-slide`).each(function () {
        const element = this;
        const resizeObserver = new ResizeObserver((entries) => {
          for (const entry of entries) {
            swiper.update();
          }
        });
        resizeObserver.observe(element);
      });
    {%- endif -%}

    {%- if styleType == 3 -%}
      {% if data.mobile_style.is_scroll %}
        let direction = '{{data.mobile_style.direction}}'
        let wrapWidth = document.querySelector('#block_brand_list-{{blockId}} .content').clientWidth
        let showNumber = $(window).width() >= 768 ? Number('{{data.pc_number}}') : Number('{{data.wap_number}}')
        let itemGap = (showNumber - 1) * 20
        $('#block_brand_list-{{blockId}} .list.style3 .list_item').width((wrapWidth - itemGap) / showNumber)
        let boxeWidth = document.querySelector('#block_brand_list-{{blockId}} .list.style3').clientWidth
        {% if data.mobile_style.is_scroll %}
          let animation = anime({
            targets: '#block_brand_list-{{blockId}} .list',
            duration: Number('{{data.mobile_style.speed}}') * 1000,
            easing: 'linear',
            direction: direction == 'left' ? 'normal' : 'reverse',
            translateX: [0,-boxeWidth],
            loop: true
          })
          
          {% if data.mobile_style.hover_stop %}
            $('#block_brand_list-{{blockId}} .content').hover(() => {
              animation.pause()
            },() => {
              animation.play()
            })
          {% endif %}
  
        {% endif %}
        
      {% endif %}
      
      {%- unless data.mobile_style.is_scroll -%}
        let swiper = new Swiper('#swiper-{{blockId}}', {
          slidesPerView: {{pc_number }},
          loop: true,
          autoplay:{
            disableOnInteraction: false,
            {%- if data.mobile_style.direction == 'right' -%}
              reverseDirection: true,
            {%- endif -%}
            delay: Number('{{data.mobile_style.speed}}') * 1000,
          },		
          spaceBetween: 30,
          autoHeight: true,
          lazy: {
            loadPrevNext: true,
          },
          breakpoints: {
            768: {
                slidesPerView: {{wap_number}},
                spaceBetween: 20
            }
          }
        })

        {%if data.mobile_style.hover_stop %}
          swiper.el.onmouseover = function(){
            swiper.autoplay.stop();
          }
          swiper.el.onmouseout = function(){
            swiper.autoplay.start();
          }
        {% endif %}
        $(`#swiper-{{blockId}} .swiper-slide`).each(function () {
          const element = this;
          const resizeObserver = new ResizeObserver((entries) => {
            for (const entry of entries) {
              swiper.update();
            }
          });
          resizeObserver.observe(element);
        });
      {%- endunless -%}
    {%- endif -%}
  });
</script>

{% schema %}
{
  "class": "brand_list",
  "is_global": false,
  "icon": "icon-pinpailiebiao1",
  "name": {
    "zh_CN": "合作伙伴",
    "en_US": "Partners"
  },
  "max_blocks": "50",
  "blocks": [
    {
      "name": {
        "zh_CN": "品牌",
        "en_US": "Brand"
      },
      "type": "brand_item",
      "settings": [
        {
          "type": "card_image",
          "label": {
            "zh_CN": "图片",
            "en_US": "Image"
          },
          "default": {
            "src": "",
            "alt": ""
          },
          "info": {
            "zh_CN": "建议宽度350px，高度自适应且尺寸保持一致",
            "en_US": "Recommended width 350px, height adaptive and size consistent"
          },
          "id": "image"
        },
        {
          "type": "card_textarea",
          "id": "text",
          "label": {
            "zh_CN": "文字",
            "en_US": "Text"
          },
          "default": ""
        },
        {
          "type": "card_color",
          "id": "text_color",
          "label": {
            "zh_CN": "文字颜色",
            "en_US": "Text color"
          },
          "default": "#1D1F21"
        },
        {
          "type": "card_page_link",
          "label": {
            "zh_CN": "跳转链接",
            "en_US": "Jump links"
          },
          "default": {
            "type": "",
            "title": "",
            "url": ""
          },
          "id": "link"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "id": "detail"
    },
    {
      "type": "card_select_show",
      "label": {
        "zh_CN": "样式",
        "en_US": "styles"
      },
      "placeholder": {
        "zh_CN": "样式",
        "en_US": "styles"
      },
      "default": {
        "type": 1,
        "direction": "left",
        "speed": 4,
        "is_scroll": false,
        "hover_stop": true,
        "alignment": "0"
      },
      "id": "mobile_style",
      "default_setting": {
        "type": "card_select",
        "label": {
          "zh_CN": "样式",
          "en_US": "styles"
        },
        "info": {
          "zh_CN": "",
          "en_US": ""
        },
        "id": "type",
        "option": [
          {
            "label": {
              "zh_CN": "横向滑动",
              "en_US": "Lateral sliding"
            },
            "value": 1
          },
          {
            "label": {
              "zh_CN": "竖向平铺",
              "en_US": "Tile vertically"
            },
            "value": 2
          },
          {
            "label": {
              "zh_CN": "横向滚动",
              "en_US": "Tile vertically"
            },
            "value": 3
          }
        ],
        "default": 1
      },
      "slot_settings": [
        {
          "value": 2,
          "settings": [
            {
              "type": "card_select",
              "label": {
                "zh_CN": "对齐",
                "en_US": "Alignment"
              },
              "default": "0",
              "id": "alignment",
              "option": [
                {
                  "label": {
                    "zh_CN": "居中",
                    "en_US": "Center"
                  },
                  "value": "0"
                },
                {
                  "label": {
                    "zh_CN": "右对齐",
                    "en_US": "Right alignment"
                  },
                  "value": "1"
                },
                {
                  "label": {
                    "zh_CN": "左对齐",
                    "en_US": "Left alignment"
                  },
                  "value": "2"
                }
              ]
            }

          ]
        },
        {
          "value": 3,
          "settings": [
            {
              "type": "card_switch",
              "label": {
                "zh_CN": "无缝滚动",
                "en_US": "Seamless scrolling"
              },
              "default": false,
              "id": "is_scroll"
            },
            {
              "type": "card_switch",
              "label": {
                "zh_CN": "鼠标悬停时暂停",
                "en_US": "Pause on mouse hover"
              },
              "default": true,
              "id": "hover_stop"
            },
            {
              "type": "card_select",
              "label": {
                "zh_CN": "滚动方向",
                "en_US": "Scroll direction"
              },
              "default": "left",
              "id": "direction",
              "option": [
                {
                  "label": {
                    "zh_CN": "靠左",
                    "en_US": "To the left"
                  },
                  "value": "left"
                },
                {
                  "label": {
                    "zh_CN": "靠右",
                    "en_US": "To the right"
                  },
                  "value": "right"
                }
              ]
            },
            {
              "type": "card_slider",
              "label": {
                "zh_CN": "滚动速度",
                "en_US": "Scroll speed"
              },
              "id": "speed",
              "max": 60,
              "min": 1,
              "unit": "s",
              "default": 15
            }
          ]
        }
      ]
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "PC端一排数量",
        "en_US": "A row of numbers at the PC end"
      },
      "id": "pc_number",
      "max": 10,
      "min": 2,
      "default": 6
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "移动端一排数量",
        "en_US": "Number of mobile terminals per row"
      },
      "id": "wap_number",
      "max": 4,
      "min": 1,
      "default": 3
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容",
        "en_US": "Content"
      }
    }
  ],
  "default": {
    "settings": {
      "title": "Partner",
      "detail": "",
      "mobile_style": {
        "type": 1,
        "alignment": "0",
        "direction": "left",
        "speed": 15,
        "is_scroll": false,
        "hover_stop": true
      },
      "pc_number": 6,
      "wap_number": 3
    },
    "blocks": [
      {
        "block_type": "brand_item",
        "image": {
          "src": "",
          "alt": ""
        },
        "text": "",
        "text_color": "#1D1F21",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        }
      },
      {
        "block_type": "brand_item",
        "image": {
          "src": "",
          "alt": ""
        },
        "text": "",
        "text_color": "#1D1F21",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        }
      },
      {
        "block_type": "brand_item",
        "image": {
          "src": "",
          "alt": ""
        },
        "text": "",
        "text_color": "#1D1F21",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        }
      },
      {
        "block_type": "brand_item",
        "image": {
          "src": "",
          "alt": ""
        },
        "text": "",
        "text_color": "#1D1F21",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        }
      },
      {
        "block_type": "brand_item",
        "image": {
          "src": "",
          "alt": ""
        },
        "text": "",
        "text_color": "#1D1F21",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        }
      },
      {
        "block_type": "brand_item",
        "image": {
          "src": "",
          "alt": ""
        },
        "text": "",
        "text_color": "#1D1F21",
        "link": {
          "type": "",
          "title": "",
          "url": ""
        }
      }
    ]
  }
}
{% endschema %}
